<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
            list-style:none;
            user-select: none;
        }
        .container{
            width:800px;
            border:1px solid gray;
            margin:30px auto;
        }
        .menus{
            display: flex;
            height:40px;
            align-items: center;

        }
        .menus li{
            padding:5px 10px;
            margin:0px 20px;
            cursor: pointer;

        }
        .menus li.item:hover{
            background:orange;
            color:#fff;
        }
        .menus li.item.active{
            background: orangered;
            color: #fff;
        }
        .goodslist{
            display: flex;
            flex-wrap: wrap;
        }
        .goodslist .item{
            width:200px;
            height:300px;
            padding:10px;
            font-size:14px;
            box-sizing: border-box;
        }
        .goodslist .item img{
            width: 100%;
            height:180px;
        }

    </style>
</head>
<body>  
    <div id="app">
     
       <a href="shopcart.html">购物车</a>
        <div class="container">
            <ul class="menus">
                <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;品牌</li>
                <li class="item" :class="{active:item.id===currentbrandid}" @click="currentbrandid=item.id" v-for="(item,i) in brandList" :key="i" class="item">{{item.name}}</li>
            </ul>
            <ul class="menus">
                <li>使用人群</li>
                <li class="item" :class="{active:item.id===currentpersonid}" @click="currentpersonid=item.id" v-for="(item,i) in personTypeList" :key="i" class="item">{{item.name}}</li>
            </ul>
            <ul class="menus">
                <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;风格</li>
                <li class="item" :class="{active:item.id=== currenttypeid}" @click="currenttypeid=item.id" v-for="(item,i) in  typeList" :key="i" class="item">{{item.name}}</li>
            </ul>
            <ul class="goodslist">
                <li class="item" v-for="(item,i) in goodslist">
                    <img :src="item.img">
                    <div style="height: 40px;overflow:hidden;">{{item.title}}</div>
                    <div style="color:red;">{{item.price.toFixed(2)}}</div>
                    <div>
                        <button>加入购物车</button>
                    </div>
                </li>

            </ul>

        </div>

    </div>  
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
    <script>
        new Vue({
            el:"#app",
            data(){
                return{
                    brandList:[],
                    currentbrandid: 0,
                    personTypeList:[],
                    currentpersonid:0,
                    typeList:[],
                    currenttypeid:0,
                    goodslist:[]


                }
            },
            methods:{
                getBrandList(){
                    axios.get('data/brand.json').then(res=>{
                        this.brandList = res.data
                        this.brandList.unshift({
                            id:0,
                            name:"全部"

                        })
                })
                },
                getPersonType(){
                    axios.get('data/person.json').then(res=>{
                        this.personTypeList =res.data
                        this.personTypeList.unshift({
                            id:0,
                            name:"全部"
                        })
                    })
                },
                getStyleType(){
                    axios.get('data/style.json').then(res=>{
                        this.typeList =res.data
                        this.typeList.unshift({
                            id:0,
                            name:"全部"
                        })
                    })
                },
                getGoodList(){
                    this.goodslist = []
                    axios.get('data/goods.json').then(res=>{
                        var result =[]
                        if(!this.currentbrandid&&!this.currentpersonid&&!this.currenttypeid){
                            result =res.data
                        }else if(this.currenttypeid&&this.currentpersonid&&this.currentpersonid){
                          result= res.data.filter(item=>
                          console.log(item))
                        }
                        this.goodslist =result
                        
                    })
                }
            },
            mounted(){
                this.getBrandList()
                this.getPersonType()
                this.getStyleType()
                this.getGoodList()
            }
        })
    

    
    </script>
</body>
</html>